• HTML
  • CSS
  • JS

    Temas HTML

  • Estructura

  • Texto

  • Listas

  • Metadatos

  • Representar código

  • Multimedia

  • Tablas

  • Eventos

  • Formularios

  • Validaciones

  • Envío de Datos

  • Controladores JS

  • Pre-Carga

  • Recordatorios

Etiquetas Generales

Se tratan de etiquetas creadas con el fin de cumplir con roles específicos; esto no significa que sean elementos inútiles o poco relevantes, ya que según sea el caso de uso, cualquiera de estas etiquetas puede ser muy útil siempre que sea bien empleada. Son etiquetas con usos simples y fáciles de entender.

A

Significa "ancla," es la etiqueta utilizada para definir los hipervínculos; el texto que se desee mostrar como enlace deberá estar ubicado dentro de esta etiqueta.

Esta etiqueta no solo redirige al usuario a otra página, sino que también puede llevarlo a una sección en específico de esta. Esto se hace añadiendo un "#" seguido del id del elemento que se desee ubicar (todo esto escrito sin espacios), ya que el "#" hace referencia al id de un elemento. De la misma forma, también se puede redirigir a una sección dentro del mismo documento; esto se hace únicamente escribiendo el "#" seguido del id del elemento seleccionado.

A continuación se muestran dos ejemplos: el primero es de una redirección a un elemento del mismo documento, y el segundo a una redirección a un área en particular de un documento externo.

Atributos

  • href: Es el atributo designado para indicar la dirección http a la que el enlace dirigirá al usuario; puede ser una ubicación interna o externa de la página.

  • title: Este atributo define un texto explicativo que hará aparición si el usuario mantiene el ratón sobre el enlace; por lo tanto, no será visible para usuarios que naveguen usando el teclado o dispositivos táctiles.

  • target: Este atributo define la ventana en la que se abrirá el nuevo enlace; si se usa el valor "_blank" se abrirá la nueva página en una pestaña diferente, en cambio, si se omite este atributo el enlace se abrirá por defecto en la pestaña activa.

Nota: cualquier elemento puede ir dentro de la etiqueta "a", por lo tanto casi cualquier cosa puede ser convertida en un enlace, desde contenedores e imágenes, etc.

Nota: Es recomendable que los enlaces brinden palabras clave o algún tipo de información sobre el contenido al que redirigen, ya que tanto los usuarios como los motores de lectura escanean la página y uno de los elementos resaltados en los que se guían son los enlaces.

Nota: Otros consejos al crear enlaces son: que el texto que los componga sea breve (los textos excesivamente largos no son gratos) y evitar que el texto de estos sea repetitivo; ejemplo de mala práctica: "Haz clic aquí".

Nota: Es recomendable usar las direcciones relativas de archivos siempre que sea posible ya que, pese a que dejan de funcionar si el archivo cambia de lugar, son más eficientes y legibles, lo que dará un código más limpio.

Descargar un archivo en un enlace

Para indicar que se trata de la descarga de un elemento se utiliza el atributo "download", el cual no solo indicará que el navegador debe descargar el elemento seleccionado, sino que también define el nombre que se vinculará al archivo al hacerlo (esto lo hace en base al texto que se indique en el atributo).

Enviar un correo mediante un enlace

Esta es otra función que ofrece la etiqueta "a"; para hacer uso de esta se utiliza el valor "mailto:" en el atributo "href", seguido del correo electrónico al que se desee que el usuario contacte. Esto abrirá una ventana de correo con dicho destinatario seleccionado. A su vez, otra opción es poner el atributo "href" únicamente con valor "mailto:"; esto abrirá la ventana de correo pero no proveerá un destinatario en específico.

El siguiente es un ejemplo de cómo se usa el atributo "mailto":

Br

La función de esta etiqueta es muy simple: indica un salto de línea. Sin importar realmente en qué lugar o contenedor se encuentre, siempre tendrá el mismo efecto, el cual es equivalente a presionar Enter en un editor de texto.

Si se utiliza en el interior de una etiqueta "p" (párrafo), esta etiqueta aplicará el mismo efecto que tendría un "punto y aparte"; por lo tanto, el texto saltará a la siguiente línea pero no se distanciará de la anterior ni tomará sangría. Se puede usar para representar líneas cortas como las de un verso.

Details

Actúa como un widget de revelación, ya que tiene la funcionalidad de mostrar un texto oculto el cual se despliega cuando se cliquea sobre este. Es un elemento de contenido dinámico. Es necesario tener presente que se trata de una etiqueta bastante reciente, por lo tanto no está habilitada en versiones antiguas de los navegadores.

Atributos

  • "Details" incluye los atributos globales.

  • open: Este atributo booleano indica si los detalles serán mostrados al usuario cuando la página se cargue; por defecto el valor es false y, por lo tanto, estarán ocultos.

A continuación se muestran dos ejemplos: el primero consiste en el código del elemento y el segundo en el resultado de este código:

Ejemplo

ejemplo details

Efecto

Some details

More info about the details.

Nota: (los estilos CSS de este proyecto afectan la visualización del details)

Hr

Esta es otra etiqueta con una función simple: crea una línea horizontal en el contenedor en que se encuentre. Se utiliza para crear divisiones visuales.

Ejemplo de visualización

Primer elemento


Segundo elemento

Time

Existen muchas formas de plasmar una fecha, sin mencionar que esto puede representarse de forma diferente en algunos lugares. Para eso se utiliza el elemento "time", acompañado del atributo "datetime", ya que este elemento tiene la ventaja de que funciona para cualquier formato de fecha (hora, día, mes, año) así como para las mezclas de estos.

Su uso consiste en ingresar la fecha dentro del atributo "datetime" con el formato adecuado para que sea entendible por el navegador; a su vez, dentro de la etiqueta se ingresa la fecha de la forma en que será visible para los usuarios. De esa forma, el usuario visualiza el formato con el que esté familiarizado sin que el navegador presente errores.

Ejemplos de aplicación

Contacto

¿Quién soy?

Mi nombre es Carlos Miguel Puche Moreno, estoy estudiando programación web de forma autodidacta. Si quieres saber más, visita mi perfil de GitHub haciendo clic en mi fotografía, o visita mis redes sociales:

Redes

Currículum